<template>
	<view class="inputCaptcha">
		<uni-nav-bar left-icon="back" :status-bar="true" :fixed="true" :shadow="false" @clickLeft="handleBack">
			<view slot="default" class="common-headText">手机号验证</view>
		</uni-nav-bar>
		<view class="phoneInfo">
			<view class="leftArea">
				<text>验证码已发送至</text>
				<text v-if="changePasswordParams.phone">
					+{{ this.countryCode ? this.countryCode : 86 }} {{ changePasswordParams.phone.substr(0, 3) }}****{{ changePasswordParams.phone.substr(7) }}
				</text>
			</view>
			<view class="reGet" :style="{ color: countDownSecond == -1 ? '#0c72c3' : '#000' }" @click="countDown">
				{{ countDownSecond == -1 ? '重新获取' : countDownSecond + 's' }}
			</view>
		</view>
		<view class="captchaArea">
			<view class="captchas">
				<view class="captchaBox" v-for="(item, index) in captchas" :key="index">
					<input type="number" :value="item" />
					<view class="bottomLine" :class="{toRight:item}"></view>
				</view>
			</view>
			<input :focus="true" type="number" maxlength="4" v-model="changePasswordParams.captcha" />
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import { register } from '@/api/account.js';
import { verifyCaptcha } from '@/api/captcha.js';
import { sentCaptcha } from '@/api/captcha.js';
export default {
	data() {
		return {
			changePasswordParams: {
				phone: null,
				password: null,
				captcha: null
			},
			from: '',
			captchas: new Array(4).fill(null),
			countDownSecond: -1,
			countryCode: '86'
		};
	},
	onLoad(e) {
		this.from = e.from;
		this.countryCode = e.countryCode;
		this.changePasswordParams.phone = e.phone;
		this.changePasswordParams.password = e.password;
		for (let key in this.changePasswordParams) {
			if (!this.changePasswordParams[key]) {
				delete this.changePasswordParams[key];
			}
		}
	},
	watch: {
		'changePasswordParams.captcha': {
			handler(newV) {
				this.captchas = new Array(4).fill(null);
				let complete = true;
				for (let i = 0; i < String(newV).length; i++) {
					this.captchas[i] = String(newV).substr(i, 1);
				}
				for (let i = 0; i < this.captchas.length; i++) {
					if (!this.captchas[i]) {
						complete = false;
						break;
					}
				}
				if (complete) {
					if (this.from == 'forget') {
						uni.showLoading();
						register(this.changePasswordParams)
							.then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									uni.showToast({
										title: res.msg || res.message || '密码设置成功',
										icon: 'none'
									});
									uni.navigateTo({
										url: '/pages/main/main'
									});
								}
							})
							.catch(err => {
								uni.hideLoading();
								if (err.msg || err.message) {
									uni.showToast({
										title: err.msg || err.message,
										icon: 'none'
									});
								}
							});
					} else if (this.from == 'register') {
						uni.showLoading();
						verifyCaptcha({ phone: this.changePasswordParams.phone, captcha: this.changePasswordParams.captcha })
							.then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									uni.navigateTo({
										url:
											'/pages/login/mobilephoneLogin/inputPassword?from=register&captcha=' +
											this.changePasswordParams.captcha +
											'&phone=' +
											this.changePasswordParams.phone
									});
								}
							})
							.catch(err => {
								if (err.msg || err.message) {
									uni.showToast({
										title: err.msg || err.message,
										icon: 'none'
									});
								}
								uni.hideLoading();
							});
					}
				}
			}
		}
	},
	methods: {
		countDown() {
			if (this.countDownSecond == -1) {
				sentCaptcha({ phone: this.changePasswordParams.phone, ctcode: this.countryCode })
					.then(res => {
						if (res.code != 200) {
							clearInterval(timer);
							uni.showToast({
								title: res.message || res.msg,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						this.countDownSecond = -1;
						clearInterval(timer);
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
					});
				this.countDownSecond = 59;
				let timer = setInterval(() => {
					this.countDownSecond--;
					if (this.countDownSecond == -1) {
						clearInterval(timer);
					}
				}, 1000);
			}
		},
		handleBack() {
			uni.navigateBack();
		}
	},
	components: {
		components: { uniNavBar }
	}
};
</script>

<style lang="scss">
.inputCaptcha {
	/deep/.uni-navbar--border {
		border: none;
	}
	.phoneInfo {
		padding: 20px;
		box-sizing: border-box;
		height: 86px;
		display: flex;
		flex-shrink: 0;
		justify-content: space-between;
		.leftArea {
			display: flex;
			justify-content: space-between;
			flex-shrink: 0;
			flex-direction: column;
			> text:last-child {
				color: #a1a1a1;
			}
		}
		.reGet {
			margin-top: 26px;
		}
	}
	.captchaArea {
		height: 56px;
		position: relative;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		.captchas {
			display: flex;
			justify-content: center;
			.captchaBox {
				width: 100upx;
				height: 100upx;
				margin: 0 8px;
				position: relative;
				padding-bottom: 1px;
				overflow: hidden;
				> input {
					width: 100%;
					height: 100%;
					border-bottom: #ccc 1px solid;
					text-align: center;
				}
				.bottomLine{
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 1px;
					background-color: #000;
					left: -100%;
					transition: left 0.4s ease;
				}
				.toRight{
					left: 0px;
					transition: left 0.4s ease;
				}
			}
		}
		> input {
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
